<%--<p id="content">--%>

<%--</p>--%>
<%-- 如果返回为对象直接调用el表达式 ${article} --%>
<%--${article}--%>
<%--<script>--%>

<%--var article = ${article};--%>

<%--function test() {--%>
<%--if (article !== ""){--%>
<%--document.getElementById('content').innerHTML=article.content;--%>
<%--}--%>
<%--}--%>

<%--</script>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>编辑文章</title>
    <link rel="shortcut icon" href="static/assets/css/images/favicon.png">

    <link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/assets/markdown/css/editormd.css"/>
    <script src="static/assets/js/jquery-3.1.1.min.js"></script>
    <script src="static/assets/js/tether.min.js"></script>
    <script src="static/assets/markdown/js/editormd.js"></script>
    <script src="static/assets/js/bootstrap.min.js"></script>

    <style>
        .body {
            background-color: #e5e5e5;
        }

        #paper {
            background-color: white;
            border-radius: 1em;
            margin: 2% 20% 2% 20%;
        }

        .bottom_line {

            border-style: solid;
            border-bottom-color: #ececec;
            border-top-color: white;
            border-left-color: white;
            border-right-color: white;
            border-bottom-width: 0.2em;
            padding-bottom: 20px;
        }

        .btn_margin {
            margin-bottom: 1%;
        }

    </style>
</head>
<body class="body">
<div id="paper">
    <div class="container">
        <div style="padding-top: 10px"><h3 style="font:bold 30px 微软雅黑;padding-bottom: 20px;">影评文章</h3></div>

        <%--action="user/modify?id=${article.id}"--%>
        <form method="post" enctype="multipart/form-data" id="uploadForm">

            <input type="text" name="id" value="${article.id}" hidden>

            <div class="form-group bottom_line "
                 style="border-bottom-width:0.2em; padding-top: 20px; border-top-color: #ececec;">
                <label for="title" style="font:bold 20px 微软雅黑">影评标题</label>
                <input type="text" class="form-control" value="${article.title}" name="title" id="title"
                       placeholder="影评标题"
                       required>
            </div>
            <div class="form-group bottom_line">
                <label for="author" style="font:bold 20px 微软雅黑">影评作者</label>
                <input type="text" class="form-control" value="${article.author}" name="author" id="author"
                       placeholder="影评作者" required>
            </div>
            <div class="form-group bottom_line">
                <label for="link" style="font:bold 20px 微软雅黑">影评的电影链接</label>
                <input type="url" class="form-control" name="link" id="link" value="${article.link}"
                       placeholder="影评的电影链接"
                       required>
            </div>

            <div class=" form-group  bottom_line" id="vue-category">
                <%--<label style="font:bold 20px 微软雅黑">电影类型</label>--%>
                <%--<div id="categoryId" style="display: none" value="${article.categoryId}"></div>--%>
                <%--<br>--%>
                <%--<div v-for="item in array" class="radio">--%>
                <%--<input type="radio" name="category" :id="item.id" >--%>
                <%--{{item.name}}--%>
                <%--</div>--%>
                <label style="font:bold 20px 微软雅黑">电影类型</label>
                <div id="categoryId" style="display: none" value="${article.categoryId}">${article.categoryId}</div>
                <br>
                <div onclick="dis_categoryName()">
                    <select class="form-control" id="select_id" name="categoryId">

                        <option id="categoryName" value="${article.categoryId}" style="display: none"></option>

                        <option v-for="item in array" :id="item.id" :value="item.id">{{item.name}}</option>
                    </select>

                </div>
            </div>

            <div class="form-group bottom_line">
                <label for="description" style="font:bold 20px 微软雅黑">影评的简单描述</label>
                <textarea class="form-control" id="description" name="description" rows="3"
                          required>${article.description}</textarea>
            </div>
            <div class="form-group bottom_line">
                <label for="image" style="font:bold 20px 微软雅黑">标题图片</label>
                <input type="file" class="form-control-file" name="file" id="image" aria-describedby="fileHelp"
                       required>

                <small id="fileHelp" class="form-text text-muted">上传文章在列表中展示的图片</small>
            </div>


            <div id="markdownEditor">
            <textarea style="display:none;" class="editormd-markdown-textarea"
                      placeholder="Enjoy Markdown! coding now..."
                      name="content" id="content">${article.content}</textarea>
            </div>
            <button type="button" class="btn btn-danger btn_margin" onclick="doUpload()"
            <%--data-toggle="modal" data-target="#myModal"--%>
            >提交
            </button>
            <%--<button id="back" class="btn btn-primary btn_margin" type="button">返回</button>--%>
        </form>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">提交成功</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-footer" style="display: table">
                    <a class="btn btn-primary btn_margin" id="see" href="article/">查看页面</a>
                    <a  class="btn btn-primary btn_margin" id="edit" href="user/article/">继续编辑</a>
                    <a  class="btn btn-primary btn_margin" href="">首页</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <script src="static/assets/js/vue.js"></script>
    <script type="text/javascript">
        editormd("markdownEditor", {
            height: 740,
            path: 'static/assets/markdown/lib/',
            codeFold: true,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "upload"

        });
        $('#back').click(function () {
            history.back();
        });
    </script>

    <%--获取分类数据--%>
    <script>

        $.ajax({
            url: "api/article/category/list",
            type: "GET",
            success: function (data) {//存入data

                get_category = new Vue({//分类的构造函数
                    el: '#vue-category',//挂载点
                    data: {
                        array: data
                    }

                });
                console.log(data)
            },
            error: function (data) {
                console.log(data)
            }
        });


        var category1 = document.getElementById("1");
        var category2 = document.getElementById("2");
        var category4 = document.getElementById("4");
        var category5 = document.getElementById("5");
        var category6 = document.getElementById("6");
        var categoryName = document.getElementById("categoryName");


        if ($("#categoryName").attr("value") == 1) {
            $("#select_id").prepend("<option id=\"categoryName2\" value=\"${article.categoryId}\" style=\"display: block\">未分类</option>");
        }
        if ($("#categoryName").attr("value") == 2) {
            $("#select_id").prepend("<option id=\"categoryName2\" value=\"${article.categoryId}\" style=\"display: block\">家庭类</option>");
        }
        if ($("#categoryName").attr("value") == 4) {
            $("#select_id").prepend("<option id=\"categoryName2\" value=\"${article.categoryId}\" style=\"display: block\">搞笑类</option>");
        }
        if ($("#categoryName").attr("value") == 5) {
            $("#select_id").prepend("<option id=\"categoryName2\" value=\"${article.categoryId}\" style=\"display: block\">梦想类</option>");
        }
        if ($("#categoryName").attr("value") == 6) {
            $("#select_id").prepend("<option id=\"categoryName2\" value=\"${article.categoryId}\" style=\"display: block\">情感类</option>");
        }


        function dis_categoryName() {
            $("#categoryName2").css("display", "none");
        }


        <%--function upload() {--%>
        <%--$.ajax({--%>
        <%--url: "/api/user/article",--%>
        <%--type: "POST",--%>
        <%--data: {--%>
        <%--id:${article.id},--%>
        <%--title:$("#title")["0"].value,--%>
        <%--author:$("#author")["0"].value,--%>
        <%--categoryId:$("#select_id")["0"].value,--%>
        <%--link:$("#link")["0"].value,--%>
        <%--description:$("#description").text(),--%>
        <%--content:$("#content").text(),--%>
        <%--image:$("#image").text(),--%>
        <%--image:new FormData($( "#image" )[0])--%>
        <%--},--%>
        <%--success:function (article) {--%>
        <%--console.log(article);--%>
        <%--}--%>
        <%--})--%>
        <%--}--%>


        function doUpload() {
            var formData = new FormData($("#uploadForm")[0]);
            var user;
            $.ajax({
                url: 'api/user/article',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,

                success: function (data) {

                    $('#myModal').modal('toggle');
                    var getid = data.id;
                    var getuserId = data.userId;

                    var see = "article/" + getid;
                    var edit = "user/article/" + getuserId;

                    $("#see").attr("href", see);
                    $("#edit").attr("href", edit);
                },
                error: function () {

                    alert("提交失败")
                }

            });
        }


    </script>
    <%--获取分类数据、填充、上传--%>


</div>

<div class="row" style="padding-top: 60px; clear: both;">
    <div class="col-md-12 text-center"><p><small>&copy; 滑稽</small> </p></div>
</div>
</body>
</html>

